<template>
	<view>
		<view class="header-back">
			<view class="header">
				<image class="header-img" src="@/static/images/left.png" @tap="back"></image>
				<view class="header-title">快速卖房</view>
			</view>
		</view>

		<view class="item">
			<view class="type">
				<view class="text text1">标题：</view>
				<input class="input1" placeholder="请输入标题" v-model="title" />
			</view>
			<view class="type">
				<view class="text">城市：</view>
				<image src="@/static/images/tianjiadidian.png" class="location" mode="widthFix"></image>
				<Region :defaultValue="defaultValue" @change="onChangeRegion" style="margin-top: 20upx;"></Region>
			</view>
			<view class="type">
				<view class="text text1">小区：</view>
				<input class="input1" placeholder="请输入小区名字" v-model="address" />
			</view>
			<view class="type">
				<view class="text text1">面积：</view>
				<input class="input1" placeholder="请输入房间面积(㎡)" v-model="size" />
			</view>
			<view class="type">
				<view class="text" style="height: 40upx;line-height: 40upx;">户型：</view>
				<view class="" style="width: 75%;display: flex;flex-wrap: wrap;">
					<view style="margin-bottom: 10upx;" class="type1" @tap="changeCheckinType(index)" v-for="(item,index) in house_type2_arr">
						<image
							:src="index == current_house_types?'/static/images/xianshi.png':'/static/images/buxianshi.png'"
							class="icon" mode="widthFix"></image>
						<view class="" style="font-size: 28upx;">{{item.name}}</view>
					</view>
				</view>
			</view>
			<view class="type">
				<view class="text">楼层：</view>
				<input class="input1" type="text" placeholder="请输入楼层" v-model="floor">
			</view>

			<view class="type">
				<view class="text">朝向：</view>
				<view class="btn" @tap="roomActive1(index)" :class="[index==current_orientation?'active':'']"
					v-for="(item,index) in orientation_arr">{{item.name}}
				</view>
			</view>
			<view class="type">
				<view class="text">装修：</view>
				<view class="btn" @tap="levelActive2(index)" :class="[index==current_decoration?'active':'']"
					v-for="(item,index) in decoration_arr">{{item.name}}
				</view>
			</view>
			<view class="type">
				<view class="text">房屋类型：</view>
				<view class="btn" @tap="levelActive3(index)" :class="[index==current_house_type1?'active':'']"
					v-for="(item,index) in house_type1_arr">{{item.name}}
				</view>
			</view>
			<view class="type">
				<view class="text">电梯：</view>
				<view class="btn" @tap="levelActive4(1)" :class="[active4==1?'active':'']">有
				</view>
				<view class="btn" @tap="levelActive4(2)" :class="[active4==2?'active':'']">无
				</view>
			</view>
			<view class="type">
				<view class="text">单价：</view>
				<input class="input1" type="text" placeholder="请输入单价(元)" v-model="price">
			</view>
			<view class="type">
				<view class="text">期望售价：</view>
				<input class="input1" type="text" placeholder="请输入售价(万)" v-model="expect_price">
			</view>
			<view class="type">
				<view class="text">联系人：</view>
				<input class="input1" type="text" placeholder="请输入联系人姓名" v-model="contacts">
			</view>
			<view class="type">
				<view class="text">联系电话：</view>
				<input class="input1" type="text" placeholder="请输入联系电话" v-model="mobile">
			</view>
			<view class="type">
				<view class="text">房屋照片：</view>
				<uploads :type="code"></uploads>
				<!-- <image src="@/static/images/Add.png" mode="widthFix" class="add"></image> -->
			</view>
			<view class="type">
				<view class="text text1">房屋亮点：</view>
				<textarea class="input1 textarea" placeholder="请简单描述房屋亮点及特色(选填)" v-model="detail" />
			</view>
			<view style="height: 220rpx;"></view>
			<view class="fixed">
				<!-- <view class="agree-files-content">
					<view class="remember" @tap="agree">
						<checkbox-group>
							<label>
								<checkbox value="cb" :checked="checked" class="remember-input" />请确认已阅读并接受
							</label>
						</checkbox-group>
					</view>
					<navigator class="forget" url="/pages6/pages/docs/service-contract">
						《房屋出售授权协议》
					</navigator>
				</view> -->
				<view class="fixed-tijiao">
					<view @tap="clickConfirm">发 布</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Region from '@/components/region/region.vue';
	import uploads from "@/components/uploads.vue";
	export default {
		data() {
			return {
				noClick: true,
				title: '',
				house_type2_arr: [],
				current_house_types: 0,
				house_type2: 0,

				orientation_arr: [],
				current_orientation: 0,
				orientation: 0,

				decoration_arr: [],
				current_decoration: 0,
				decoration: 0,

				house_type1_arr: [],
				current_house_type1: 0,
				house_type1: 0,

				defaultValue: [],
				location: '',
				checked: false,
				active1: 1,
				active2: 1,
				active3: 1,
				active4: 1,

				elevator: 1,
				code: '1',
				pics: '',
				address: '',
				size: '',
				floor: '',
				price: 0,
				expect_price: '',
				contacts: '',
				mobile: '',
				detail: ''
			};
		},

		components: {
			Region,
			uploads
		},

		onLoad: function() {

			this.getHouseType2();

			uni.$on('change', (options) => {
				this.pics = JSON.stringify(options)
			})
		},

		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},

			async getHouseType2() {
				let res = await this.$myRequest({
					url: '/get_house_info'
				})

				let data = res.data.data;
				this.house_type2_arr = data.house_type2;
				this.orientation_arr = data.orientation;
				this.decoration_arr = data.decoration;
				this.house_type1_arr = data.house_type1;

				this.house_type2 = this.house_type2_arr[0].id;
				this.orientation = this.orientation_arr[0].id;
				this.decoration = this.decoration_arr[0].id;
				this.house_type1 = this.house_type1_arr[0].id;
			},

			async agree() {
				if (this.checked === true) {
					this.checked = false
				} else {
					this.checked = true;
				}
			},

			onChangeRegion(region) {
				let id = 0;
				let area = [];
				this.location = region[1].id;
				if (region[2].id > 0) {
					id = region[2].id;
					area = [region[0].name, region[1].name, region[2].name];
					this.location = region[2].id;
				} else {
					id = region[1].id;
					area = [region[0].name, region[1].name, ''];
				}
				this.defaultValue = area;
			},

			changeCheckinType(index) {
				this.current_house_types = index;
				this.house_type2 = this.house_type2_arr[index].id;
			},

			//房间类型选择
			roomActive1(index) {
				this.current_orientation = index;
				this.orientation = this.orientation_arr[index].id;
			},

			levelActive2(index) {
				this.current_decoration = index;
				this.decoration = this.decoration_arr[index].id;
			},

			levelActive3(index) {
				this.current_house_type1 = index;
				this.house_type1 = this.house_type1_arr[index].id;
			},

			levelActive4(type) {
				this.active4 = type;
				this.elevator = type;
			},

			// 提交表单
			async clickConfirm() {
				//防止连续点击
				let that = this;
				if (that.noClick) {
					that.noClick = false;
					setTimeout(function() {
						that.noClick = true;
					}, 2000)
				} else {
					that.$api.msg("请稍后点击")
					return false;
				}
				//判断是否登录
				let result = that.$api.isLogin();
				if (result === false) {
					return false;
				}

				// if (this.checked === false) {
				// 	this.$api.msg('请先同意授权协议！')
				// 	return false;
				// }

				if (!that.title) {
					that.$api.msg('请输入标题！');
					return false;
				}

				if (!that.location) {
					that.$api.msg('请选择城市！');
					return false;
				}

				if (!that.address) {
					that.$api.msg('请输入小区名称！');
					return false;
				}

				if (!that.size || that.size <= 0) {
					that.$api.msg('请输入面积（万）！');
					return false;
				}

				if (!that.floor || that.floor <= 0) {
					that.$api.msg('请输入楼层！');
					return false;
				}

				if (!that.price || that.price <= 0) {
					that.$api.msg('请输入单价！');
					return false;
				}

				if (!that.expect_price || that.expect_price <= 0) {
					that.$api.msg('请输入期望售价(万)！');
					return false;
				}

				if (!that.contacts) {
					that.$api.msg('请输入联系人姓名！');
					return false;
				}

				if (!that.mobile) {
					that.$api.msg('请输入联系电话！');
					return false;
				}

				if (!that.pics) {
					that.$api.msg('请上传房屋照片！');
					return false;
				}

				let token = uni.getStorageSync('token')
				let cate = uni.getStorageSync('cate')
				let dataObj = {
					token: token,
					cate: cate,
					title: that.title,
					house_type2: that.house_type2,
					orientation: that.orientation,
					decoration: that.decoration,
					house_type1: that.house_type1,
					elevator: that.elevator,
					pics: that.pics,
					address: that.address,
					size: that.size,
					floor: that.floor,
					price: that.price,
					expect_price: that.expect_price,
					contacts: that.contacts,
					mobile: that.mobile,
					detail: that.detail,
					district: that.location
				};

				// console.log(dataObj)
				that.submit(dataObj);
			},

			//登录提交
			async submit(dataObj) {
				let res = await this.$myRequest({
					url: '/add_homestay',
					data: dataObj,
					methods: 'post'
				})

				let status = res.data.status
				if (status) {
					this.$api.msg('添加成功');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages7/pages/index/index'
						})
					}, 1000)
				}
			},
		},
	}
</script>

<style lang="scss">
	page {
		font-size: 30rpx;
		// padding-right: 5rpx;
	}

	.header-back {
		height: 250rpx;
		background-image: url(@/pages7/static/images/tu2.jpg);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.header {
		position: relative;
		top: 68upx;
		display: flex;
		justify-content: center;
		width: 100%;
	}

	.header-img {
		width: 30upx;
		height: 40upx;
		position: absolute;
		left: 20upx;
	}

	.header-title {
		font-size: 32upx;
		font-weight: 600;
		color: #fff;
	}

	.location {
		width: 30rpx;
		height: 36rpx;
		margin: 20rpx;
	}

	.fixed {
		position: fixed;
		bottom: 0rpx;
		z-index: 199;
		width: 100%;
		height: 190rpx;
		background-color: white;
		box-shadow: 0 -1px 1px #e2dada;
	}

	.item {
		.type {
			display: flex;
			align-items: flex-start;
			margin-left: 30rpx;
			margin-top: 20rpx;
			flex-wrap: wrap;

			.text {
				letter-spacing: 2rpx;
				font-size: 28upx;
				height: 70rpx;
				line-height: 70rpx;
				width: 22%;
			}

			.input1 {
				background-color: #f5f5f5;
				padding: 20rpx;
				height: 70rpx;
				width: 75%;
				font-size: 28rpx;
			}

			.textarea {
				height: 200rpx;
			}

			.icon {
				width: 30rpx;
				height: 30rpx;
				margin-top: 5rpx;
				margin-right: 10rpx;
				margin-left: 10rpx;
			}

			.btn {
				color: #999999;
				background-color: #f7f7f7;
				text-align: center;
				border-radius: 10rpx;
				margin-left: 20rpx;
				padding: 10rpx;
				margin-top: 10rpx;
				font-size: 28upx;
			}

			.add {
				width: 200rpx;
				height: 200rpx;
			}

			.add-btn {
				display: flex;
				height: 100%;
				width: 80%;
				flex-wrap: wrap;
			}

			.text2 {
				// margin-top: 20rpx;
			}
		}

		.type1 {
			display: flex;
			margin-left: 10rpx;
			// margin-top: 10rpx;
		}

		.typeBottom {
			width: 90%;
			margin: 20rpx auto;
			background-color: #f5f5f5;
			border-radius: 10rpx;
			height: 100rpx;
			display: flex;
			align-items: center;



			.type-didian {
				flex: 1;
			}

			.right {
				width: 14rpx;
				height: 24rpx;
				margin-right: 30rpx;
			}
		}
	}

	.agree-files-content {
		margin-top: 20upx;
		line-height: 42rpx;
		width: 100%;
		color: #666666;
		font-size: 24rpx;
		display: flex;
		align-items: center;

		.remember {
			display: inline-flex;
			margin-left: 32upx;

			.remember-input {
				display: inline-block;
				transform: scale(0.6)
			}

		}

		.forget {
			color: #f3431a;
			display: inline-block;
		}
	}

	.fixed-tijiao {
		position: absolute;
		top: 50upx;
		height: 80upx;
		width: 90%;
		margin-left: 5%;
		background-color: #2846d2;
		border-radius: 6upx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}

	.active {
		background-color: #3c87fe !important;
		color: #fff !important;
	}
</style>
